import React from 'react'
import { HashRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom/cjs/react-router-dom.min'
import './index.scss'
import Recommend from '../Recommend'
import Ranking from '../Ranking'
import SongList from '../SongList'
export default function FindMusic () {
  return (
    <Router>
      <div className='findmusic d-flex'>
        <ul className='nav flex-column bg-light me-3'>
          <li className='nav-item'>
            {/* //!注意：二级路由要想被匹配，必须先匹配一级路由，也就意味着路径要以一级路由的路径开头 */}
            <NavLink
              className='nav-link'
              aria-current='page'
              to='/findmusic/recommend'
            >
              推荐
            </NavLink>
          </li>
          <li className='nav-item'>
            <NavLink className='nav-link' to='/findmusic/ranking'>
              排行榜
            </NavLink>
          </li>
          <li className='nav-item'>
            <NavLink className='nav-link' to='/findmusic/songlist'>
              歌单
            </NavLink>
          </li>
        </ul>
        <div className='flex-grow-1'>
          {/* 这样不加 exact 为啥也行？ */}
          {/* to='/findmusic/recommend' 代码肯定会继续往下进行路由匹配，往下走的时候碰到了 <Route path='/findmusic/recommend' component={Recommend} /> */}
          {/* 一旦匹配到了，路由匹配完毕，所以能看到 Recommend 组件 */}
          {/* <Redirect from='/findmusic' to='/findmusic/recommend' />
        <Route path='/findmusic/recommend' component={Recommend} />
        <Route path='/findmusic/ranking' component={Ranking} />
        <Route path='/findmusic/songlist' component={SongList} /> */}
          <Switch>
            <Redirect exact from='/findmusic' to='/findmusic/recommend' />
            <Route path='/findmusic/recommend' component={Recommend} />
            <Route path='/findmusic/ranking' component={Ranking} />
            <Route path='/findmusic/songlist' component={SongList} />
          </Switch>
        </div>
      </div>
    </Router>
  )

}

